<template>
  <view class="header">
    <view class="search" @click="toSearch">
      <svg
        style="margin: 0 20rpx"
        t="1685415610198"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2867"
        width="16"
        height="16"
      >
        <path
          d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
          fill="#3D3D3D"
          p-id="2868"
        ></path>
      </svg>
      <view style="color: #666666">输入商家名或菜品</view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  background: #ea1625;
  height: 100rpx;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 999;
  position: relative;
  margin-bottom: 50rpx;
  align-items: center;

  .search {
    display: flex;
    align-items: center;
    background: #fce8e9;
    height: 60rpx;
    width: 600rpx;
    border-radius: 5px;
  }
}
</style>
